<div id="editor-styles">
<style>
#editor-styles {max-width:600px;}
#editor-styles .fa{display:none;}
#editor-styles #left-panel{list-style: none; text-align: center;  color: #FFF;}
#editor-styles #left-panel > li.active, #editor-styles #left-panel > li > a:hover { background: #4c4342; text-decoration: none;}
#editor-styles #left-panel > li > a {display: block;line-height: 45px; color: #dad9d8;text-decoration: none;font-size: 12px;border-bottom: 1px solid rgba(255,255,255,0.06);}
#editor-styles .tab-pane.active{display:block;}

#editor-styles #image-tabs {height:32px !important;width: 100%;background-color: rgba(76, 67, 66,0.2);background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);}
#editor-styles #image-tabs > li {
    list-style: none;
    display: inline-block;
    text-align: center;line-height:32px;
    width: auto;
}
#editor-styles #image-tabs > li a,#style-categories > li > a{color:#3a3332}
#editor-styles #image-tabs > li.active{background:#FFF;}

#editor-styles .tab-content{position:relative;}
#editor-styles .tab-content > .tab-pane {display: none;visibility: hidden;}
#editor-styles .tab-content > .active {display: block;visibility: visible;}
#editor-styles .col-md-4{width:100%;float: none;}
#editor-styles .col-sm-4{width:33.33%;float: left;}
#editor-styles .appmsg{padding:10px 5px;border:0 none;border-bottom:1px solid #ddd;text-align:center;}

#editor-styles input[type=text] {color: #333;background-color: transparent;border: 1px solid #ccc;padding: 0 10px;}

#style-categories {padding:0 0;margin: 0;text-align: center;}
#style-categories .active{color:red;}
#style-categories > li {list-style: none;display:inline-block;padding: 0 6px;}
#style-categories > li > a:hover, #style-categories > li > a:focus{text-decoration: none;background-color: #ddd;display: block;}
#style-categories ul.dropdown-menu li {list-style: none;display:block;padding: 0;}
#style_search_list  ul li, #style-overflow-list ul li {cursor: pointer;width:100%;padding: 5px 5px;display: block;border-bottom: 1px solid #ddd;}
#style-overflow-list ul li:hover {background: #FFF;}

#editor-styles-content .col-sm-12,#system-template-list .col-md-6,#system-img-list .col-sm-4{cursor: pointer;width:100%;padding:15px 5px;border-bottom: 1px solid #ddd;}
#editor-styles-content .pagelink{clear: both;padding:5px 5px;font-size: 12px;background-color: rgba(245, 245, 245,0.8);border-bottom:1px solid #d4d4d4 !important}
#editor-styles-content .ui-page-default,#editor-styles-content .ui-page-active{padding:1px 5px;}

#editor-styles #images-list .appmsg {    height: 135px;}
#editor-styles #images-list img{cursor:pointer;max-height:95px;width:auto;}
#editor-styles #images-list .btn{    height: 25px;padding: 0 2px;line-height: 25px;}
#editor-styles .image-filter{padding:5px;}

#system-template-list img.template-cover{border: 1px solid #eee;}
#system-template-list .tools{display:none;}

#system-img-list .appmsg{border:0 none;}#system-img-list img{max-width:100%;}
#system-img-list .cover{text-align: center;}

#editor-styles ul {margin:0 0;}
#editor-styles * {font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size: 14px;}
#editor-styles * {max-width: 100%!important;margin:0;padding:0;font-style:normal;box-sizing: border-box!important;-webkit-box-sizing: border-box!important;word-wrap: break-word!important;}
#editor-styles table{margin-bottom:10px;border-collapse:collapse;display:table;width:100%!important}
#editor-styles td,th{word-wrap:break-word;word-break:break-all;padding:5px 10px;border:1px solid #DDD}
#editor-styles caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center}
#editor-styles th{border-top:2px solid #BBB;background:#f7f7f7}
#editor-styles .ue-table-interlace-color-single{background-color:#fcfcfc}
#editor-styles .ue-table-interlace-color-double{background-color:#f7faff}
#editor-styles td p{margin:0;padding:0;width:auto;height:auto;}

#editor-styles p{clear:both;margin:0 0;font-size:12px;min-height:1em;white-space: normal;}
#editor-styles img{*zoom:1;max-width:100%;*max-width:96%;height:auto !important;}
#editor-styles iframe{width:301px !important;border:0;background-color:none;}
#editor-styles iframe,#editor-styles .video_iframe {background-color: #000000;width: 100% !important;position: static;}
#editor-styles blockquote{margin:0;padding-left:10px;border-left:3px solid #DBDBDB;}
.filter {cursor: pointer;display: inline-block;}
#editor-styles .pagelink{margin: 10px 0;}
#editor-styles .pagelink span,#editor-styles .pagelink a{padding:0 3px;}
.dropdown { position: relative;}
.dropdown-menu {position: absolute;top: 100%;left: 0;z-index: 1000;display: none;float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;list-style: none;font-size: 14px;text-align: left;background-color: #ffffff;border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15);  border-radius: 0px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);  background-clip: padding-box;}
.open > .dropdown-menu {  display: block;}
.dropdown-menu > li > a { display: block;padding: 5px 15px !important;clear: both;font-weight: normal;line-height: 1.42857143;color: #333333;white-space: nowrap;}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a.active,.dropdown-menu > li > a:focus { text-decoration: none;  color: #ffffff;  background-color: #2fa4e7;}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none;outline: 0;background-color: #2fa4e7;}
</style>
	<ul id="left-panel" class="editor-menus" style="width:60px;float:left;background: rgba(0, 0, 0, 0.6);">
		<li><img src="http://image.135editor.com/logo.png" title="135编辑器插件版" style="width:60px;padding:10px 5px;"></li>
		<li class="active"><a href="#favor-styles">样式</a></li>
		
		<li><a href="#online-imgs" data-target="#online-imgs-list" data-toggle="tab" data-url="//www.135editor.com/images/lists #images-list">图片素材</a></li>
		{{$appinfo['Appkey']['custom_menu']}}
	</ul>
	<div class="tab-content" id="editor-styles-content" style="display:block;overflow-y: auto;overflow-x: overlay;margin-left:60px;background:#FFF;">
		<div id="online-styles"  class="tab-pane" style="overflow-x: hidden;"></div>
		<div id="online-imgs"  class="tab-pane">
			<ul class="editor-menus" id="image-tabs" style="border:0 none;text-align:left;">
			  <li class="ignore active" style="padding:0 0;"><a data-refresh="always" style="padding:5px 8px;" data-url="//www.135editor.com/images/lists?type=images&amp;inajax=1 #images-list" href="#online-imgs-list" role="tab" data-toggle="tab">图库</a></li>
			  <li class="ignore" style="padding:0 0;"><a style="padding:5px 8px;" data-refresh="always" data-url="//www.135editor.com/images/lists?cate_id=85&amp;inajax=1 #images-list" href="#online-imgs-list" role="tab" data-toggle="tab">表情</a></li>
			  <li class="ignore" style="padding:0 0;"><a style="padding:5px 8px;" data-refresh="always" data-url="//www.135editor.com/images/lists?cate_id=84&amp;inajax=1 #images-list" href="#online-imgs-list" role="tab" data-toggle="tab">图标</a></li>
			  <li class="ignore" style="padding:0 0;"><a style="padding:5px 8px;" data-refresh="always" data-url="//www.135editor.com/images/lists?source=soogif&amp;inajax=1 #images-list" href="#online-imgs-list" role="tab" data-toggle="tab">SOOGIF动图</a></li>
			</ul>
			<div id="online-imgs-list"></div>
		</div>
		<div id="custom-tab1"  class="tab-pane"></div>
		<div id="custom-tab2"  class="tab-pane"></div>
		<div id="custom-tab3"  class="tab-pane"></div>
		<div id="online-template"  class="tab-pane"></div>
		<div id="online-onekey"  class="tab-pane" style="padding:2px;"></div>
			<div id="favor-styles"  class="tab-pane active">
			
				<div  id="copyright" style="line-height:32px;">
			          	<div style="height:64px;line-height:32px;padding:0 10px;color: #555; background-color:rgba(76, 67, 66,0.2);background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);">
			          		<p>{{if $current_user_id}}
			          		135编辑器
			          		{{else}}
			          		135编辑器体验版
			          		{{/if}} <a href="javascript:void(0)" style="float:right;margin:2px 5px 0 0;font-size:13px;" id="refresh-styles">刷新</a></p>
			          		<p>
			          			<input type="text" placeholder="输入关键字搜索样式" style="height:30px;width:150px;" id="txtStyleSearch"> 
			          		</p>
			          	</div>
			          	<div id="styleSearchResult" style="position:absolute;display:none;top:64px;left:0px;width:384px;z-index: 100;border: 5px solid rgba(80,80,80,0.2);background:#FFF;">
			          		<p style="padding:5px;border-bottom: 3px solid #ddd;">搜索结果 <span class="btn" style="float:right;font-size: 24px;color: #000000;font-weight: bold;text-shadow: 0 1px 0 #ffffff;" onclick="$('#styleSearchResult').hide();"> × </span> </p>
			          		<div id="styleSearchResultList" style="width:100%;overflow-y:auto;">
			          			<img src="//static.135editor.com/img/ajax/circle_ball.gif">
			          		</div>
			          	</div>
				 </div>
				 <?php $appinfo['Appkey']['show_icon'] = 0; ?>
				 <div style="background-color:rgba(234,234,234,0.9);height:40px;line-height: 40px;text-align:center;">
			          	{{template editor_styles/style_categories}}
				  </div>
				  <div id="style-overflow-list" style="overflow-y:auto;overflow-x:hidden;height:300px;background-color: #fcfcfc;">
				          {{if empty($company_user_id)&&empty($current_user_id) }}
			{{if $expired && !empty($appinfo)}}
					<section style="padding:10px 20px;border-bottom:1px solid #ddd;"><p style=" color:red;font-size: 16px;">使用的135编辑器插件已过期，功能被锁定。请管理员联系QQ285694665续期。</p></section>
			{{elseif empty($appinfo) || empty($userinfo)}}
				<section style="padding:10px 20px;border-bottom:1px solid #ddd;"><p style=" color:red;font-size: 16px;">使用的135编辑器插件体验版，请管理员联系QQ285694665获取正式授权，解锁更多功能。</p></section>
			{{/if}}
										<ul  class="editor-template-list ui-portlet-list anony"  style="padding-top: 5px;">
										  		<portlet  cache="900" ulclass="editor-template-list" portlet="body" list_tpl="inner" limit="3" model="EditorStyle" order="recommend desc,click_nums desc" info="recursive=1&fields[]=summary&fields[]=origin&fields[]=content&fields[]=name&fields[]=support_brush&fields[]=id&conditions[cate_id]=1&conditions[status]=1&conditions[recommend]=1">
													<li {{if $item['summary']}} data-content="{{str_replace('"','',$item['summary'])}}" data-title="{{$item['name']}}" data-trigger="hover" data-placement="right" data-container="body" data-toggle="popover"{{else}}  title="{{$item['name']}}" {{/if}}
													class="recomment-style {{if $key%2==1}}itembg2{{/if}} {{if $item['cate_id'] > 49}} cate-{{$item['cate_id']}} {{/if}}  col-xs-12 tag-recommend {{loop $item_all['Tag'] $tag}} tagtpl-{{$tag['id']}} {{/loop}}" data-id="{{$item['id']}}">
														<section class="135editor"  data-id="{{$item['id']}}">{{$item['content']}}<section style="display: block; width: 0; height: 0; clear: both;"></section></section>
													</li>
												</portlet>
										</ul>
							{{else}}
								<div class="ui-portlet clearfix ">
									<ul  class="editor-template-list ui-portlet-list" style="padding: 5px;">
									<?php $subfix = $current_user_id % 256;  ?>	
								<?php  $fav_ids = array(); $favor_pages = ''; $style_count = 0; ?>
								  
								  {{if $current_user_id}}
							  			<portlet  cache="no" ulclass="editor-template-list" portlet="body" list_tpl="inner"
							  			 limit="500"
										 model="EditorStyle" order="Favorite.updated desc"
										 info="recursive=1&joins[0][table]=favorites_$subfix&joins[0][alias]=Favorite&joins[0][type]=inner&joins[0][conditions][Favorite.model]=EditorStyle&joins[0][conditions][]=Favorite.data_id=EditorStyle.id&conditions[EditorStyle.cate_id %3C%3E]=3&conditions[]=Favorite.creator_id=$current_user_id&fields[]=support_brush&fields[]=cate_id&fields[]=summary&fields[]=origin&fields[]=Favorite.id&fields[]=Favorite.click_nums&fields[]=Favorite.updated&fields[]=content&fields[]=EditorStyle.cover_width&fields[]=EditorStyle.name&fields[]=EditorStyle.id&fields[]=EditorStyle.coverimg&fields[]=EditorStyle.brush_image">
											
										  <?php  $fav_ids[] = $item['id']; if($item['brush_image']) continue; ?>
												<li  style="position:relative;" data-click="{{$item_all['Favorite']['click_nums']}}" data-time="{{strtotime($item_all['Favorite']['updated'])}}"
							{{if $item['summary']}} data-content="{{str_replace('"','',$item['summary'])}}" data-title="{{$item['name']}}" data-trigger="hover" data-placement="right" data-container="body" data-toggle="popover"{{else}}  title="{{$item['name']}}" {{/if}}
							class="fav-style col-xs-12 {{if $item['cate_id'] > 49}} cate-{{$item['cate_id']}} {{/if}}  {{loop $item_all['Tag'] $tag}}  tagtpl-{{$tag['id']}} {{/loop}}" data-id="{{$item['id']}}">
												{{if $item['cate_id'] > 49}}
													<?php
													$appendStyle = 'max-width:100%;';
													if($item['cover_width']) { $appendStyle .= 'width:'.$item['cover_width'].'px;';} 
													if($item['cover_height']) { $appendStyle .= 'height:'.$item['cover_height'].'px !important;';}
					 								?>
													<p class="135editor" data-tools="135编辑器" style="text-align:center;" data-id="{{$item['id']}}"><img style="{{$appendStyle}}" data-id="{{$item['id']}}" src="{{$item['coverimg']}}" /></p>
												{{else}}
													<section class="135editor" data-tools="135编辑器" data-id="{{$item['id']}}">{{$item['content']}}<section style="display: block; width: 0; height: 0; clear: both;"></section></section>
												{{/if}}
												</li>
										</portlet>
										<?php $style_count += $count; ?>
									{{/if}}
									
									{{if $company_user_id}}
									<?php $subfix = $company_user_id % 256;  ?>	
								  	<portlet  cache="no" ulclass="editor-template-list" portlet="body" list_tpl="inner"
							  			 limit="500"
										 model="EditorStyle" order="Favorite.updated desc"
										 info="recursive=1&joins[0][table]=favorites_$subfix&joins[0][alias]=Favorite&joins[0][type]=inner&joins[0][conditions][Favorite.model]=EditorStyle&joins[0][conditions][]=Favorite.data_id=EditorStyle.id&conditions[OR][EditorStyle.cate_id]=1&conditions[OR][EditorStyle.cate_id %3E]=49&conditions[]=Favorite.creator_id=$company_user_id&fields[]=support_brush&fields[]=cate_id&fields[]=summary&fields[]=origin&fields[]=Favorite.id&fields[]=Favorite.click_nums&fields[]=Favorite.updated&fields[]=content&fields[]=EditorStyle.cover_width&fields[]=EditorStyle.name&fields[]=EditorStyle.id&fields[]=EditorStyle.coverimg&fields[]=EditorStyle.brush_image">
											
										  <?php  if(in_array($item['id'],$fav_ids)) continue;if($item['brush_image']) continue; ?>
												<li  style="position:relative;" data-click="{{$item_all['Favorite']['click_nums']}}" data-time="{{strtotime($item_all['Favorite']['updated'])}}"
							{{if $item['summary']}} data-content="{{str_replace('"','',$item['summary'])}}" data-title="{{$item['name']}}" data-trigger="hover" data-placement="right" data-container="body" data-toggle="popover"{{else}}  title="{{$item['name']}}" {{/if}}
							class="fav-style col-xs-12 {{if $item['cate_id'] > 49}} cate-{{$item['cate_id']}} {{/if}}  {{loop $item_all['Tag'] $tag}}  tagtpl-{{$tag['id']}} {{/loop}}" data-id="{{$item['id']}}">
												{{if $item['cate_id'] > 49}}
													{{if $item['cover_width']}}
													<section class="135editor" data-tools="135编辑器" data-id="{{$item['id']}}"><section style="text-align:center;"><section style="display:inline-block;width:{{$item['cover_width']}}px;"><img data-id="{{$item['id']}}" style="max-width:100%;width:{{$item['cover_width']}}px;" title="{{$item['name']}}" src="{{$item['coverimg']}}" /></section></section></section>
													{{else}}
													<section class="135editor" data-tools="135编辑器" data-id="{{$item['id']}}"><p style="text-align:center;"><img data-id="{{$item['id']}}" title="{{$item['name']}}" src="{{$item['coverimg']}}" /></p></section>
													{{/if}}
												{{else}}
													<section class="135editor" data-tools="135编辑器" data-id="{{$item['id']}}">{{$item['content']}}<section style="display: block; width: 0; height: 0; clear: both;"></section></section>
												{{/if}}
												</li>
										</portlet>
								  	<?php $style_count += $count; ?>
								  {{/if}}
								  
									{{if empty($style_count)}}							
									<li><p>请前往<a href="//www.135editor.com/style-center?cate_id=1">135网站样式中心</a>收藏您需要用到的样式</p></li>
									{{/if}}
									</ul>
								</div>		
							{{/if}}	
				</div>
			</div>
	</div> 
</div> 
<section id="color-plan" style="width:110px;position:fixed;top:105px;right:-5px;height:320px;text-align: center;display:none;z-index: 1000;">
	<div id="color-choosen" style="position:absolute;right:0px;padding: 10px 0px !important;width:105px;padding:5px 0;background:rgba(58,51,50,0.8);">		
			  	<div style="margin:5px 5px;color:#FFF;line-height:32px;text-align: center;position:relative;" >
		        	<input id="custom-color-text" class="colorPicker form-control" style="font-size:12px;width:100%;color:#FFF;padding:4px;height:24px;line-height:16px" id="custom-color" value="#EF7060" />
		        </div>
		        
		        <div style="margin:0 0;color:#dad9d8;line-height:18px;text-align: center;"><label style="cursor:pointer;margin-bottom:0px;font-size:12px;"><input style="margin-top:8px;" type="checkbox" id="replace-color-all" value="1"> 全文换色</label></div>

			 	<hr style="margin:2px 20px;border-color:#ddd;"/>
			    <ul class="clearfix" style="list-style:none;padding:0 5px;margin:0 0;">
		            <li class="color-switch" style="background-color: #ac1d10"></li>
		            <li class="color-switch" style="background-color: #d82821;"></li>
		            <li class="color-switch default-color" style="background-color: #ef7060;"></li>
		            <li class="color-switch" style="background-color: #fde2d8;"></li>
		            
		            <li class="color-switch" style="background-color: #d32a63;"></li>
		            <li class="color-switch" style="background-color: #eb6794;"></li>
		            <li class="color-switch" style="background-color: #f5bdd1;"></li>            
		            <li class="color-switch" style="background-color: #ffebf0;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #e2561b;"></li>
		            <li class="color-switch" style="background-color: #ff8124;"></li>
		            <li class="color-switch" style="background-color: #fcb42b;"></li>
		            <li class="color-switch" style="background-color: #feecaf;"></li>
		            
		            <li class="color-switch" style="clear:left;background-color: #0c8918;"></li>
		            <li class="color-switch" style="background-color: #80b135;"></li>
		            <li class="color-switch" style="background-color:#c2c92a;"></li>
		            <li class="color-switch" style="background-color:#e5f3d0;"></li>
		            
		            <!-- <li class="color-switch" style="clear:left;background-color: #1f877a;"></li>
		            <li class="color-switch" style="background-color: #27abc1;"></li>
		            <li class="color-switch" style="background-color: #5acfe1;"></li>
		            <li class="color-switch" style="background-color: #b6f2ea;"></li> -->
		            
		            <li class="color-switch" style="clear:left;background-color:#374aae;"></li>
		            <li class="color-switch" style="background-color:#1e9be8;"></li>
		            <li class="color-switch" style="background-color:#59c3f9;"></li>
		            <li class="color-switch" style="background-color:#b6e4fd;"></li>
		
		            <li class="color-switch" style="clear:left;background-color:#5b39b4;"></li>
		            <li class="color-switch" style="background-color: #4c6ff3;"></li>
		            <li class="color-switch" style="background-color:#91a8fc;"></li>
		            <li class="color-switch" style="background-color:#d0dafe;"></li>
		            
		            <!-- 紫色 -->
		            <li class="color-switch" style="clear:left;background-color:#8d4bbb;"></li>
		            <li class="color-switch" style="background-color: rgb(166, 91, 203);"></li>
		            <li class="color-switch" style="background-color:#cca4e3;"></li>
		            <li class="color-switch" style="background-color: rgb(190, 119, 99);"></li>
		            
		            <li class="color-switch" data-color="#efefef" style="clear:left;background-color:#3c2822;"></li>
		            <li class="color-switch" style="background-color:#6b4d40;"></li>
		            <li class="color-switch" style="background-color:#9f887f;"></li>
		            <li class="color-switch" style="background-color:#d7ccc8;"></li>
		            
		        	<li class="color-switch" style="background-color: #212122;"></li>
		        	<li class="color-switch" style="background-color: #757576;"></li>
		        	<li class="color-switch" style="background-color: #c6c6c7"></li>
		        	<li class="color-switch" style="background-color: #f5f5f4"></li>
		        	
		        </ul>
		        {{if $current_user_id}}
		        {{/if}}
	
	</div>
	<section style="clear:both;width:0px;height:0px;"></section>      
</section>
